.draggable-container {

}
$border-color: tomato;
.draggable {
    width: 25%;
    margin: 1.3rem 0 0 1rem;
    color: white;
    border-radius: 0.75em;
    padding: 0.3em;
    touch-action: none;
    user-select: none;
    border: 2px dashed transparent;
    position: relative;
    overflow: hidden;
    &.border-line {
        border: 2px dashed $border-color;
        &::before {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            top: -4px;
            left: 50%;
            background-color: $border-color;
        }
        &::after {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            bottom: -40px;
            left: 50%;
            background-color: $border-color;
        }
    }
    .mark-item {
        &::before {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            top: 50%;
            left: -4px;
            background-color: $border-color;
        }
        &::after {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            right: -4px;
            top: 50%;
            background-color: $border-color;
        }
    }
    .drag-resize-item {
        width: 100%;
        height: 100%;
        background-color: #29e;
        min-height: 6.5em;
        border-radius: 0.75em;
        padding: 0.8em;
    }
}
